<template>
	<view class="statistics-page">
		<Notice></Notice>
		<u-navbar :is-back="true" title="统计分析" class="topbar"></u-navbar>
		<div class="dataview flex">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.qxxqs"></u-loading>
			<div class="dataview-i" v-if="pageData.qxxqs">
				<u-count-to class="count" :start-val="0" :end-val="pageData.qxxqs.top_trend.total" :bold="true" font-size="40" separator=","></u-count-to>
				<div class="label">总量</div>
			</div>
			<div class="dataview-i" v-if="pageData.qxxqs">
				<u-count-to class="count" :start-val="0" color="#5090F1" :end-val="1367" :bold="true" font-size="40" separator=","></u-count-to>
				<div class="label">正面</div>
			</div>
			<div class="dataview-i" v-if="pageData.qxxqs">
				<u-count-to class="count" :start-val="0" color="#E6960C" :end-val="1643" :bold="true" font-size="40" separator=","></u-count-to>
				<div class="label">中性</div>
			</div>
			<div class="dataview-i" v-if="pageData.qxxqs">
				<u-count-to class="count" :start-val="0" color="#E65441" :end-val="1022" :bold="true" font-size="40" separator=","></u-count-to>
				<div class="label">负面</div>
			</div>
		</div>
		<div class="line"></div>
		<u-sticky :offset-top="offset">
			<u-tabs class="tabs" gutter="0" :list="tabs" bar-width="80" :current="tabIndex" @change="tabChange"></u-tabs>
		</u-sticky>
		<!-- 倾向性趋势 -->
		<div class="block qxxqs" ref="qxxqs">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.qxxqs"></u-loading>
			<div class="title">倾向性趋势</div>
			<div class="text" v-if="pageData.qxxqs" v-html="pageData.qxxqs.message"></div>
			<div class="chart-box">
				<div class="ctabs flex">
					<span class="ctab" :class="chartTabIndex.qxxqs == 'day' && 'on'" @click="chartTabChange('qxxqs','day')">按天</span>
					<span class="ctab" :class="chartTabIndex.qxxqs == 'hour' && 'on'" @click="chartTabChange('qxxqs','hour')">按小时</span>
				</div>
				<div class="chart chart-qxxqs"><l-echart ref="chart_qxxqs"></l-echart></div>
			</div>
		</div>
		<!-- 媒体分布 -->
		<div class="block mtfb" ref="mtfb">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.mtfb"></u-loading>
			<div class="title">媒体分布</div>
			<div class="text" v-if="pageData.mtfb" v-html="pageData.mtfb.message"></div>
			<div class="chart-box">
				<div class="chart chart-mtfb"><l-echart ref="chart_mtfb"></l-echart></div>
			</div>
			<u-table class="table">
				<u-tr class="u-tr">
					<u-th class="u-th">媒体类型</u-th>
					<u-th class="u-th">全部</u-th>
					<u-th class="u-th">正面</u-th>
					<u-th class="u-th">负面</u-th>
					<u-th class="u-th">中性</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(item, index) in tableData.mtfb" :key="index">
					<u-td class="u-td">{{ item.name }}</u-td>
					<u-td class="u-td">{{ item.total }}</u-td>
					<u-td class="u-td">{{ item.positive }}</u-td>
					<u-td class="u-td">{{ item.negative }}</u-td>
					<u-td class="u-td">{{ item.normal }}</u-td>
				</u-tr>
			</u-table>
		</div>
		<!-- 发展趋势 -->
		<div class="block fzqs" ref="fzqs">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.fzqs"></u-loading>
			<div class="title">发展趋势</div>
			<div class="chart-box">
				<div class="ctabs flex">
					<span class="ctab" :class="chartTabIndex.fzqs == 'day' && 'on'" @click="chartTabChange('fzqs','day')">按天</span>
					<span class="ctab" :class="chartTabIndex.fzqs == 'hour' && 'on'" @click="chartTabChange('fzqs','hour')">按小时</span>
				</div>
				<div class="chart chart-fzqs"><l-echart ref="chart_fzqs"></l-echart></div>
			</div>
		</div>
		<!-- 地域统计 -->
		<div class="block dytj" ref="dytj">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.dytj"></u-loading>
			<div class="title">地域统计</div>
			<div class="text" v-if="pageData.dytj" v-html="pageData.dytj.message"></div>
			<div class="chart-box">
				<div class="ctabs flex">
					<span class="ctab" :class="chartTabIndex.dytj == 'day' && 'on'" @click="chartTabChange('dytj','day')">信息发布地域</span>
					<span class="ctab" :class="chartTabIndex.dytj == 'hour' && 'on'" @click="chartTabChange('dytj','hour')">属地信息分布</span>
				</div>
				<div class="chart chart-dytj"><l-echart ref="chart_dytj"></l-echart></div>
			</div>
		</div>
		<!-- 活跃媒体 -->
		<div class="block hymt" ref="hymt">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.hymt"></u-loading>
			<div class="title">活跃媒体</div>
			<div class="chart-box">
				<div class="chart chart-hymt"><l-echart ref="chart_hymt"></l-echart></div>
			</div>
		</div>
		<!-- 活跃作者 -->
		<div class="block hyzz" ref="hyzz">
			<u-loading class="loading" mode="flower" size="38" :show="!pageData.hyzz"></u-loading>
			<div class="title">活跃作者</div>
			<div class="chart-box">
				<div class="chart chart-hyzz"><l-echart ref="chart_hyzz"></l-echart></div>
			</div>
		</div>
	</view>
</template>

<script>
import * as echarts from "echarts";
import { trend, media, mediaTrend, region, activeMedia, activeAuthor } from "@/api/subject.js";

export default {
	data() {
		return {
			scrollTop: 0,
			tabHeight: 0,
			offset: 0,
			
			tabs: [
				{
					name: "倾向性走势",
					value: "qxxqs"
				}, 
				{
					name: "媒体分布",
					value: "mtfb"
				}, 
				{
					name: "发展趋势",
					value: "fzqs"
				},
				{
					name: "地域统计",
					value: "dytj"
				},
				{
					name: "活跃媒体",
					value: "hymt"
				},
				{
					name: "活跃作者",
					value: "hyzz"
				},
			],
			tabIndex: 0,
			pageData:{
				qxxqs: null,
				mtfb: null,
				fzqs: null,
				dytj: null,
				hymt: null,
				hyzz: null,
			},
			chartTabIndex: {
				qxxqs: "day",
				fzqs: "day",
				dytj: "day",
			},
			option:{
				qxxqs: {},
				mtfb: {},
				fzqs: {},
				dytj: {},
				hymt: {},
				hyzz: {},
			},
			tableData: {
				mtfb: []
			}
		};
	},
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				if(res.osName == "ios"){
					this.offset = 150;
				}else if(res.osName == "android"){
					this.offset = 130;
				}
			}
		})
		
		this.qxxqs();
		this.mtfb();
		this.fzqs();
		this.dytj();
		this.hymt();
		this.hyzz();

		this.$nextTick(() => {
			uni.createSelectorQuery().select(".topbar").boundingClientRect(data => {
				this.navbarHeight = data.height;
			}).exec();
			uni.createSelectorQuery().select(".tabs").boundingClientRect(data => {
				this.tabHeight = data.height;
			}).exec();
		});
	},
	onPageScroll: function(e){
		this.scrollTop = e.scrollTop;
	},
	methods: {
		tabChange(val) {
			this.tabIndex = val;
			uni.createSelectorQuery().select("."+this.tabs[val].value).boundingClientRect(data => {
				uni.pageScrollTo({
					scrollTop: data.top + this.scrollTop - this.tabHeight - this.tabHeight,
					duration: 0,
				});
			}).exec();
		},
		async qxxqs() {
			const res = await trend({trend_type: this.chartTabIndex.qxxqs == "day" ? "statistics_day" : "statistics_hour"});
			this.pageData.qxxqs = res.data;

			let legend_data = res.data.list.data.map(item=>item.name);
			let x_day = res.data.list.date;
			let x_hour = res.data.list.date;
			let y_day = res.data.list.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = res.data.list.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.qxxqs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "70rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.qxxqs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.qxxqs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_qxxqs.init(echarts, chart => {
				chart.setOption(this.option.qxxqs);
			});
		},
		async mtfb() {
			const res = await media();
			this.pageData.mtfb = res.data;
			let cicleData = res.data.list.map(item=>{
				return {
					value: item.list.all.count,
					name: item.name,
					key: item.key
				}
			});
			this.tableData.mtfb = res.data.list.map(item=>{
				return {
					name: item.name,
					total: item.list.all.count,
					positive: item.list.positive.count,
					normal: item.list.normal.count,
					negative: item.list.negative.count,
				}
			});
			this.option.mtfb = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				series: [
					{
						name: "媒体分布",
						type: "pie",
						selectedMode: "single",
						center: ["50%", "60%"],
						radius: [0, "30%"],
						label: {
							show: true,
							position: "inside",
							fontSize: 12,
							color: "#333",
						},
						labelLine: {
							show: false
						},
						data: [
							{ value: this.pageData.mtfb.total.positive, name: "正面" },
							{ value: this.pageData.mtfb.total.normal, name: "中性" },
							{ 
								value: this.pageData.mtfb.total.negative, 
								name: "负面", 
								selected: true,
								label: {
									show: true,
									rotate: true
								}
							}
						]
					},
					{
						name: "媒体分布",
						type: "pie",
						center: ["50%", "60%"],
						radius: ["35%", "45%"],
						label:{
							formatter: "{b}：{d}%"
						},
						labelLine: {
							length: 10,
							length2: 5,
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_mtfb.init(echarts, chart => {
				chart.setOption(this.option.mtfb);
			});
		},
		async fzqs() {
			const res = await mediaTrend({trend_type: this.chartTabIndex.fzqs == "day" ? "statistics_day" : "statistics_hour"});
			this.pageData.fzqs = res.data.chart;

			let legend_data = this.pageData.fzqs.labels;
			let x_day = this.pageData.fzqs.date;
			let x_hour = this.pageData.fzqs.date;
			let y_day = this.pageData.fzqs.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = this.pageData.fzqs.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.fzqs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "100rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.fzqs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.fzqs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_fzqs.init(echarts, chart => {
				chart.setOption(this.option.fzqs);
			});
		},
		async dytj() {
			const res = await region({ region_type: this.chartTabIndex.dytj == "day" ? "sts_ip_region" : "sts_location"});
			this.pageData.dytj = res.data;
			this.pageData.dytj.list.map(item=>{
				if(item.name == "河南省"){
					item.name = "河南";
				}
			})
			let tenList = this.pageData.dytj.list.reverse().slice(0,10);
			this.option.dytj = {
				tooltip: {
					trigger: "item",
				},
				grid: {
					top: "1%",
					left: "2%",
					right: "15%",
					bottom: "0%",
					containLabel: true
				},
				xAxis: [
					{
						type: "value",
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: "category",
						data: tenList.map(item=>item.name),
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							inside: true,
							interval: 0,
							show: true,
							align: "left",
							margin: 0,
							padding: [0, 0, 10 ,0],
							verticalAlign : "bottom",
							color: "#333",
							fontSize: 12,
						},
					},
				],
				series: [
					{
						type: "bar",
						data: tenList.map(item=>item.count),
						barWidth: 8,
						label: {
							show: true,
							position: "right",
							fontSize: 12,
							color: "#0d56fd",
						},
						itemStyle: {
							color: "#0d56fd",
							borderRadius: 3,
						},
						showBackground: true,
						backgroundStyle: {
							color: "#EDF4FE",
							borderRadius: 3,
						}
					},
				]
			};
			this.$refs.chart_dytj.init(echarts, chart => {
				chart.setOption(this.option.dytj);
			});
		},
		async hymt() {
			const res = await activeMedia();
			this.pageData.hymt = res.data.reverse();
			this.option.hymt = {
				tooltip: {
					trigger: "item",
				},
				grid: {
					top: "3%",
					left: "2%",
					right: "15%",
					bottom: "0%",
					containLabel: true
				},
				xAxis: [
					{
						type: "value",
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: "category",
						data: this.pageData.hymt.map(item=>item.name),
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							inside: true,
							interval: 0,
							show: true,
							align: "left",
							margin: 0,
							padding: [0, 0, 10 ,0],
							verticalAlign : "bottom",
							color: "#333",
							fontSize: 12,
						},
					},
				],
				series: [
					{
						type: "bar",
						data: this.pageData.hymt.map(item=>item.count),
						barWidth: 8,
						label: {
							show: true,
							position: "right",
							fontSize: 12,
							color: "#0d56fd",
						},
						itemStyle: {
							color: "#0d56fd",
							borderRadius: 3,
						},
						showBackground: true,
						backgroundStyle: {
							color: "#EDF4FE",
							borderRadius: 3,
						}
					},
				]
			};
			this.$refs.chart_hymt.init(echarts, chart => {
				chart.setOption(this.option.hymt);
			});
		},
		async hyzz() {
			const res = await activeAuthor();
			this.pageData.hyzz = res.data.reverse();
			this.option.hyzz = {
				tooltip: {
					trigger: "item",
				},
				grid: {
					top: "3%",
					left: "2%",
					right: "15%",
					bottom: "0%",
					containLabel: true
				},
				xAxis: [
					{
						type: "value",
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: "category",
						data: this.pageData.hyzz.map(item=>item.name),
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							inside: true,
							interval: 0,
							show: true,
							align: "left",
							margin: 0,
							padding: [0, 0, 10 ,0],
							verticalAlign : "bottom",
							color: "#333",
							fontSize: 12,
						},
					},
				],
				series: [
					{
						type: "bar",
						data: this.pageData.hyzz.map(item=>item.count),
						barWidth: 8,
						label: {
							show: true,
							position: "right",
							fontSize: 12,
							color: "#0d56fd",
						},
						itemStyle: {
							color: "#0d56fd",
							borderRadius: 3,
						},
						showBackground: true,
						backgroundStyle: {
							color: "#EDF4FE",
							borderRadius: 3,
						}
					},
				]
			};
			this.$refs.chart_hyzz.init(echarts, chart => {
				chart.setOption(this.option.hyzz);
			});
		},
		chartTabChange(key, val) {
			switch(key){
				case "qxxqs":
					this.pageData.qxxqs = null;
					this.chartTabIndex.qxxqs = val;
					this.qxxqs();
					break;
				case "fzqs":
					this.pageData.fzqs = null;
					this.chartTabIndex.fzqs = val;
					this.fzqs();
					break;
				case "dytj":
					this.pageData.dytj = null;
					this.chartTabIndex.dytj = val;
					this.dytj();
					break;

			}
		},
	}
}
</script>

<style lang="scss">
.statistics-page{
	height: 100vh;
}
.line{
	height: 20rpx;
	background-color: #F2F3F7;
}
.tabs-box{
	width: 100%;
	overflow-x: auto;
	.tabs{
		width: max-content;
	}
}
/deep/ .u-tab-item{
	flex: unset !important;
	margin: 0 10rpx;
}
.dataview{
	height: 140rpx;
	position: relative;
	z-index: 1;
	.dataview-i{
		box-sizing: border-box;
		width: 25%;
		text-align: center;
		padding: 20rpx 0;
		.label{
			margin-top: 10rpx;
		}
	}
}
.block{
	padding: 20rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	.title{
		font-weight: bold;
		font-size: 34rpx;
		line-height: 1;
	}
	.text{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
}
.chart-box{
	border: 1rpx solid #F2F2F2;
	box-sizing: border-box;
	margin-top: 20rpx;
	.ctabs{
		justify-content: flex-end;
		padding: 20rpx;
	}
	.ctab{
		font-size: 28rpx;
		margin-left: 10rpx;
		cursor: pointer;
	}
	.on{
		color: #1E62FC;
	}
}
.loading{
	position: absolute;
	z-index: 1;
	top: calc(50% - 19rpx);
	left: calc(50% - 19rpx);
}
.chart{
	width: 100%;
	height:500rpx;
}
.qxxqs{
	height: 800rpx;
}
.chart-mtfb{
	height: 580rpx;
}
.chart-fzqs{
	height: 550rpx;
}
.chart-dytj,.chart-hymt,.chart-hyzz{
	height: 700rpx;
}
.table{
	margin-top: 20rpx;
}
</style>
